import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as filtersActionCreators from '../../../../store/actionCreators/filtersActionCreators'
import { bindActionCreators } from 'redux'

import FilterTitle from '../FilterTitle/index.jsx'
import FilterPicker from '../FilterPicker/index.jsx'
import FilterMore from '../FilterMore/index.jsx'

import styles from './index.module.css'

// 导入动画库
import { Spring } from 'react-spring/renderprops'

class Filter extends Component {
  componentDidMount() {
    this.props.setFilterData()
  }

  /**
   * 渲染Mask
   */
  renderMask = () => {
    const { openType, setOpenType } = this.props

    // 是否隐藏
    const isHide = openType === 'more' || openType === ''

    /* 前三个菜单的遮罩层 */
    return (
      // 如果想要动画效果，Spring必须存在
      <Spring to={{ opacity: isHide ? 0 : 1 }}>
        {props => {
          if (props.opacity === 0) {
            return null
          }

          return (
            <div
              style={props}
              className={styles.mask}
              onClick={() => setOpenType('')}
            />
          )
        }}
      </Spring>
    )
  }

  render() {
    const { openType } = this.props
    return (
      <div className={styles.root}>
        {/* 渲染遮罩层 */}
        {this.renderMask()}

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle />

          {/* 渲染前三个菜单 */}
          {(openType === 'area' ||
            openType === 'mode' ||
            openType === 'price') && <FilterPicker />}

          {/* 最后一个菜单对应的内容： */}
          {openType === 'more' && <FilterMore />}
        </div>
      </div>
    )
  }
}

const mapStateToProps = ({ filters }) => {
  return filters
}

const mapDispatchToProps = dispatch => {
  return bindActionCreators(filtersActionCreators, dispatch)
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Filter)
